<template>
<div>
    <v-app-bar
      absolute
      color="white"
      elevate-on-scroll
      scroll-target="#scrolling-techniques-7"
    >
      <v-app-bar-nav-icon @click.stop="popupVisible = !popupVisible"></v-app-bar-nav-icon>

      <v-spacer class="main-center">
          <v-text-field
            v-model="keyword"
            label="歌名/歌词/歌手"
            clearable
            @focus="search"
            rounded
            filled
            :height="32"
            solo
            prepend-inner-icon="mdi-magnify"
            background-color="#ffff1f1"
          ></v-text-field>
      </v-spacer>

      <!-- <v-btn icon @click.stop="search">
        <v-icon>mdi-magnify</v-icon>
      </v-btn> -->

      

      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
            <v-btn icon 
                v-bind="attrs"
                v-on="on"
            >
                <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
        </template>
        <v-list>
            <v-list-item
            v-for="(item, index) in menus"
            :key="index"
            >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-navigation-drawer
        v-model="popupVisible"
        absolute
        temporary
        app
    >


    </v-navigation-drawer>
</div>
</template>
<script>
import sliderControl from '@/components/common/sliderControl'
export default {
    components: {
        sliderControl
    },
    data(){
        return {
            popupVisible: false,
            keyword: '',
            menus: [
                {
                    title: '缓存列表'
                   
                },
                {
                     title: '我的收藏'
                }
            ]
        }
    },
    methods: {
        toggle(){
            this.popupVisible = !this.popupVisible;
        },
        search(){
            this.$router.push({
                path: '/search/main',
                query: {
                    keyword: this.keyword
                }
            })    
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .main-center {
        height: px2rem(48);
        display: flex;
        align-items: center;
        .v-input {
            height: px2rem(38);
            .v-input__control {
                min-height: px2rem(38);
                .v-input__slot {
                    min-height: px2rem(38);
                    .v-text-field__slot {
                        label {
                            top: px2rem(10);
                            @include defaultTitle;
                            font-size: 12px !important;
                        }

                        input {
                            margin-top: px2rem(10);
                        }
                    }
                }
            }
        }
    }
</style>